<template>
  <div>
    <div class="boxx">
      <div class="one">街道</div>
      <div @click="poupose(1)" :style="jiedao!='请选择'?'color: black;' : ''" class="choose fsd">
        <div>{{jiedao}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="boxx">
      <div class="one">社区</div>
      <div @click="poupose(2)" :style="shequ!='请选择'?'color: black;' : ''" class="choose fsd">
        <div>{{shequ}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="boxx">
      <div class="one">类别</div>
      <div @click="poupose(3)" :style="leibie!='请选择'?'color: black;' : ''" class="choose fsd">
        <div>{{leibie}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="boxx">
      <div class="one">建筑物</div>
      <input class="two" v-model="jzwname" type="text" placeholder="请输入" />
    </div>
    <div class="boxx">
      <div class="one">单位名称</div>
      <input class="two" v-model="danweiname" type="text" placeholder="请输入" />
    </div>
    <div class="boxx">
      <div class="one">营业执照</div>
      <input class="two" v-model="bussiness" type="text" placeholder="请输入" />
    </div>
    <div class="boxx">
      <div class="one">地址/姓名</div>
      <input class="two" v-model="address" type="text" placeholder="请输入" />
    </div>
    <div class="boxx">
      <div class="one">电话</div>
      <input class="two" v-model="phone" type="number" placeholder="请输入" />
    </div>
    <div class="boxx">
      <div class="one">定位</div>
      <div @click="poupose(5)" :style="dingweiname!='请选择'?'color: black;' : ''" class="choose fsd">
        <div>{{dingweiname}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="boxx">
      <div class="one">附件</div>
      <div @click="poupose(6)" :style="fujianame!='请选择'?'color: black;' : ''" class="choose fsd">
        <div>{{fujianame}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="boxx">
      <div class="one">显示</div>
      <div @click="poupose(7)" :style="xianshi!='请选择'?'color: black;' : ''" class="choose fsd">
        <div>{{xianshi}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div style="padding:0.3rem 0;margin-top:1rem;">
      <div @click="findd" class="yes">确定</div>
    </div>
    <!-- 弹框-->
    <van-popup v-model="show">
      <div class="cont">
        <div class="list_one">
          <div class="list">
            <div>请选择</div>
            <img @click="show=false" src="../../assets/images/tk_x.png" />
          </div>
        </div>
        <div class="list_two">
          <div class="list" @click="choose(index)" v-for="(v,index) in list">
            <div>{{v.mc}}</div>
            <img v-if="index!=hh" src="../../assets/images/tk_g_false.png" />
            <img v-if="index==hh" src="../../assets/images/tk_g_true.png" />
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 提示 -->
    <van-popup v-model="showtishi">
      <div style="width: 100%;">
        <div class="list_one">
          <div class="list">
            <div>提示</div>
            <img @click="showtishi=false" src="../../assets/images/tk_x.png" />
          </div>
        </div>
        <div class="thishi_two">
          <div class="tishicont">{{tishiname}}</div>
          <div style="padding-bottom: 0.2rem;width: 100%;">
            <div @click="showtishi=false" class="thishiyes">确定</div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
 import Toast from "../toast.vue"
  export default{
    name:'jiuxiaomen',
    data(){
      return{
        tishiname:'',
        showtishi:false,
        show:false,//弹框显示
        jiedao:'请选择',//街道
        shequ:'请选择',//社区
        leibie:'请选择',//类别
        xianshi:'请选择',//显示
        danweiname:'',//单位名字
        bussiness:'',//营业执照
        address:'',//地址姓名
        phone:'',//电话
        show1list:[{mc:"地图模式"},{mc:"列表模式"}],
        jiedaolist:'',
        shequlist:'',
        leibielist:[{mc:"不限",id:-1},{mc:"小商场",id:1},{mc:"小医院",id:2},{mc:"小餐馆场所",id:3},{mc:"小旅店",id:4},{mc:"小网吧",id:6},{mc:"小生产加工企业",id:8},{mc:"小歌舞厅娱乐场所",id:5},{mc:"小美容洗浴场所",id:7},{mc:"废品回收",id:9},{mc:"其他",id:10}],
        list:'',//弹框的展示列表
        hh:-1,//选择转换图片
        b:null,//记录不同弹框选择的区别
        dingweilist:[{mc:"不限",id:-1},{mc:"有",id:1},{mc:"无",id:0}],
        dingweiname:'请选择',
        fujianame:'请选择',
        dingwei_id:'',
        fujian_id:'',
        userid:'',//用户id
        jiedao_id:'',//选择的街道id
        shequ_id:'',//选择的社区id
        leibie_id:'',
        jzwname:'',
      }
    },
    methods:{
      poupose(n){
        if(n==1){
           this.b=n
           this.list=this.jiedaolist
           if(this.jiedao=="请选择"){
             this.hh=-1
           }else{
            this.jiedaolist.forEach((i,item)=>{
              if(i.mc==this.jiedao){
               this.hh=item
              }
            })
            }
          this.show=true
        }else if(n==7){
          this.b=n
          this.list=this.show1list
          if(this.xianshi=="请选择"){
              this.hh=-1
            }else{
             this.show1list.forEach((i,item)=>{
               if(i.mc==this.xianshi){
                this.hh=item
               }
             })
             }
              this.show=true
        }else if(n==2){
           this.b=n
           if(this.jiedao=="请选择"||this.jiedao=="不限"){
             this.$toast("请先选择街道")
           }else{
              this.list=this.shequlist
                 if(this.shequ=="请选择"){
                   this.hh=-1
                 }else{
                  this.shequlist.forEach((i,item)=>{
                    if(i.mc==this.shequ){
                     this.hh=item
                    }
                  })
                  }
                 this.show=true
               }
        }else if(n==3){
           this.b=n
           this.list=this.leibielist
           if(this.leibie=="请选择"){
             this.hh=-1
           }else{
            this.leibielist.forEach((i,item)=>{
              if(i.mc==this.leibie){
               this.hh=item
              }
            })
            }
             this.show=true
        }else if(n==5){//定位
           this.b=n
           this.list=this.dingweilist
           if(this.dingweiname=="请选择"){
             this.hh=-1
           }else{
            this.dingweilist.forEach((i,item)=>{
              if(i.mc==this.dingweiname){
               this.hh=item
              }
            })
            }
             this.show=true
        }else if(n==6){//附件
           this.b=n
           this.list=this.dingweilist
           if(this.fujianame=="请选择"){
             this.hh=-1
           }else{
            this.dingweilist.forEach((i,item)=>{
              if(i.mc==this.fujianame){
               this.hh=item
              }
            })
            }
             this.show=true
        }
      },
      choose(index){
        this.hh=index
        this.show=false
        if(this.b==7){
          this.xianshi=this.show1list[index].mc
        }else if(this.b==1){
          this.jiedao=this.jiedaolist[index].mc
          this.jiedao_id=this.jiedaolist[index].id
          this.shequ="请选择"
          this.getcommunit()
        }else if(this.b==2){
          this.shequ=this.shequlist[index].mc
          this.shequ_id=this.shequlist[index].id
        }else if(this.b==3){
           this.leibie=this.leibielist[index].mc
           this.leibie_id=this.leibielist[index].id
        }else if(this.b==5){
           this.dingweiname=this.dingweilist[index].mc
           this.dingwei_id=this.dingweilist[index].id
        }
        else if(this.b==6){
           this.fujianame=this.dingweilist[index].mc
           this.fujian_id=this.dingweilist[index].id
        }
      },
      findd(){
        try {
          plus.nativeUI.showWaiting("正在加载...");

        } catch (e) {
          console.log('plus问题');
        }
        this.jzwname =this.jzwname.replace(/\s+/g,"");
        this.danweiname =this.danweiname.replace(/\s+/g,"");
        this.bussiness =this.bussiness.replace(/\s+/g,"");
        this.address =this.address.replace(/\s+/g,"");
        this.phone =this.phone.replace(/\s+/g,"");
        console.log(this.jiedao_id)
        console.log(this.shequ_id)
        console.log(this.leibie_id)
        console.log(this.jzwname)
        console.log(this.danweiname)
        console.log(this.bussiness)
        console.log(this.address)
        console.log(this.phone)
        console.log(this.dingwei_id)
        console.log(this.fujian_id)
        var session_id = []
        session_id[0] = this.jiedao_id
        session_id[1] = this.shequ_id
        session_id[2] = this.leibie_id
        session_id[3] = this.dingwei_id
        session_id[4] = this.fujian_id
        session_id[5] = this.jzwname
        session_id[6] = this.danweiname
        session_id[7] = this.bussiness
        session_id[8] = this.address
        session_id[9] = this.phone
        console.log(session_id)
        if(this.shequlist.length!==0){
            sessionStorage.setItem("sqlist_jxmd",JSON.stringify(this.shequlist) )
        }
        var xqda_params = {
                  path:'/file_query1',//列表或地图页面返回的路径
                  cs_cx:{//列表或地图页面查询参数
                    streetId:this.jiedao_id,//街道id
                    communityId:this.shequ_id,//社区id
                    type:this.leibie_id,//类别id
                    constructName:this.jzwname,
                    dwMc:this.danweiname,//单位名称
                    businessNum:this.bussiness,//营业执照
                    addrOrname:this.address,//地址姓名
                    phone:this.phone,
                    haveMap:this.dingwei_id,
                    haveFj:this.fujian_id,
                    },
                  cx_type:'jxmd'
                };
             localStorage.setItem("xqda_params",JSON.stringify(xqda_params));
            var find_params={
              streetId:this.jiedao_id,//街道id
              communityId:this.shequ_id,//社区id
              type:this.leibie_id,//类别id
              constructName:this.jzwname,
              dwMc:this.danweiname,//单位名称
              businessNum:this.bussiness,//营业执照
              addrOrname:this.address,//地址姓名
              phone:this.phone,
              haveMap:this.dingwei_id,
              haveFj:this.fujian_id,
              page:1,
              pageSize:1,
            }
        this.axios.get(this.$global_msg.Url.host + '/nineStore/selectNineStroeByExample',{
          params:find_params
        }).then((res)=>{
            console.log(res)
            if(res.data.code==0){
              try {
                plus.nativeUI.closeWaiting();
              } catch (e) {
                console.log('plus问题');
              }
              if(res.data.rows.length==0){
                this.showtishi=true
                this.tishiname="查询无数据！"
              }else{
                if(this.xianshi=='地图模式'){
                   this.$router.push("/mode_map");
                  sessionStorage.setItem("session_jxmd", JSON.stringify(session_id))
                }else if(this.xianshi=='列表模式'){
                  this.$router.push("/mode_list_jxmd");
                  sessionStorage.setItem("session_jxmd", JSON.stringify(session_id))
                }else{
                   this.showtishi=true
                   this.tishiname="请选择显示模式!"
                   }
              }
            }else{
              this.$toast(res.data.msg)
            }

          }).catch((err)=>{
            this.$toast(err)
          })


      },
      getcommunit(){
        this.axios({
          methods: 'get',
          url:this.$global_msg.Url.host+'/queryFile/queryCommunity?sid='+this.jiedao_id,
        }).then((res)=>{
          console.log(res)
          if(res.data.rows.length==1){
            this.shequ=res.data.rows[0].mc
            this.shequ_id=res.data.rows[0].id
          }else{
            this.shequlist=res.data.rows
          }
        }).catch((err)=>{
          console.log(err)
        })
      },
    },
    created() {
      // this.$forceUpdate()
      this.userid=localStorage.getItem("userId")
      console.log(this.userid)
      this.xianshi=this.show1list[1].mc

     this.axios({
       methods: 'get',
       url:this.$global_msg.Url.host+'/nineStore/selectStreetAndCommunity?userId='+this.userid,
     }).then((res)=>{
       console.log(res)
       if(res.data.rows.lev==1){//街道用户
         this.jiedao=res.data.rows.jd.mc
         this.jiedao_id=res.data.rows.jd.id
         if(res.data.rows.sq.length==1){
           this.shequ=res.data.rows.sq.mc
           this.shequ_id=res.data.rows.sq.id
         }else{
           this.shequlist=res.data.rows.sq
         }
       }else if(res.data.rows.lev==2){//社区用户
          this.jiedao=res.data.rows.jd.mc
          this.jiedao_id=res.data.rows.jd.id
          this.shequ=res.data.rows.sq.mc
          this.shequ_id=res.data.rows.sq.id
       }else if(res.data.rows.lev==0){//区域用户
           this.jiedaolist=res.data.rows.jd
       }
       var _this=this
       let arrjxmd=JSON.parse(sessionStorage.getItem("session_jxmd"))
       console.log(arrjxmd)
       if (arrjxmd!== null) {
         console.log(arrjxmd)
         if (arrjxmd[5] !== "") {
           _this.jzwname = arrjxmd[5]
         }
         if (arrjxmd[6] !== "") {
           _this.danweiname = arrjxmd[6]
         }
         if (arrjxmd[7] !== "") {
           _this.bussiness = arrjxmd[7]
         }
         if (arrjxmd[8] !== "") {
           _this.address = arrjxmd[8]
         }
         if (arrjxmd[9] !== "") {
           _this.phone = arrjxmd[9]
         }
         if (arrjxmd[0] !== "") {
           if (_this.jiedao== "请选择" || _this.jiedao== "不限") {
             console.log(_this.jiedaolist)
             _this.jiedaolist.forEach((v, index) => {
               if (v.id == arrjxmd[0]) {
                 _this.jiedao = v.mc
                 _this.jiedao_id=arrjxmd[0]
               }
             })
           }
         }
          let shequlist_jxmd=JSON.parse(sessionStorage.getItem("sqlist_jxmd"))
         if (arrjxmd[1]!== "") {
           if (_this.shequ== "请选择" || _this.shequ== "不限") {
             console.log(shequlist_jxmd)
             shequlist_jxmd.forEach((v, index) => {
               if (v.id == arrjxmd[1]) {
                 _this.shequ = v.mc
                 _this.shequ_id=arrjxmd[1]
                 _this.shequlist=shequlist_jxmd
               }
             })
           }
         }
         if (arrjxmd[2] !== "") {
           _this.leibielist.forEach((v, index) => {
             if (v.id == arrjxmd[2]) {
               _this.leibie = v.mc
               _this.leibie_id=arrjxmd[2]
             }
           })
         }
         if (arrjxmd[3] !== "") {
           _this.dingweilist.forEach((v, index) => {
             if (v.id == arrjxmd[3]) {
               _this.dingweiname = v.mc
               _this.dingwei_id=arrjxmd[3]
             }
           })
         }
         if (arrjxmd[4] !== "") {
           _this.dingweilist.forEach((v, index) => {
             if (v.id == arrjxmd[4]) {
               _this.fujianame = v.mc
               _this.fujian_id=arrjxmd[4]
             }
           })
         }
       }

     }).catch((err)=>{
       console.log(err)
     })

    },
  }
</script>

<style scoped>
  .thishiyes{
    width: 1.851851rem;
    background-color: #2B6CFE;
    color: white;
    border-radius: 0.095185rem;
    margin: auto;
    text-align: center;
    padding: 0.2rem 0;
    }
    .tishicont{
      height: 2rem;
      text-align: center;
      line-height: 2rem;
    }
  .list{
      height: 1.388888rem;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 0.3rem;
      margin-right: 0.3rem;
    }
    .list_one img{
      width: 0.4rem;
    }
    .list_two img{
      width: 0.35rem;
      margin-right: 0.2rem;
    }
   .list_two{
     max-height: 6.944444rem;
     height: auto;
     overflow-y: scroll;
    }
    .van-popup{
      width: 90%;
      border-radius: 0.18rem;
    }
   .cont{
      width: 100%;
      }
    .boxx .one{
      margin-left: 0.5rem;
    }
    .boxx .two{
      margin-right: 0.5rem;
    }
  .choose{
    color:#5F5D5C;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 0.3rem;
  }
  .boxx{
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.3rem;
    }
    .yes{
      width: 80%;
      height: 0.825925rem;
      background-color: #2B6CFE;
      text-align: center;
      line-height:0.825925rem ;
      color: white;
      border-radius: 0.095185rem;
      margin-left: 10%;
    }
    input{
      text-align: left;
      width:5.555555rem;
    }
</style>
